<template>
  <div class="main">
    <vHeader title="绑定手机号" @return="$router.go('-1')" />
    <div class="content">
      <div class="box">

        <div class="row">
          <div class="top">
            <img class="icon" src="../assets/images/bindPhone/bind-phone.png" />
            <p>手机号</p>
          </div>
          <div class="bottom">
            <div class="left" @click="showPicker=!showPicker">
              <p>+86</p>
              <van-icon name="arrow-down" size="0.4rem" color="#9eacb3" />
              <div class="line"></div>
            </div>
            <div class="right">
              <input type="text" placeholder="请输入您的手机号" />
            </div>
          </div>
        </div>

        <div class="row" style="margin-top: 30px;">
          <div class="top">
            <img class="icon" src="../assets/images/bindPhone/bind-code.png" />
            <p>验证码</p>
          </div>
          <div class="bottom">

            <div class="right" style="padding-left: 0;">
              <input type="text" placeholder="请输入您的手机号" />
              <div class="code" @click="getCode">获取验证码</div>
            </div>
          </div>
        </div>

      </div>

      <div class="button" :class="isActive ? 'active' : ''">
        确认
      </div>

      <div class="safe">
        <div class="img">
          <img class="icon" src="../assets/images/bindPhone/safe.png" />
        </div>
        <p>98PAY保障您的信息安全</p>
      </div>
    </div>


    <van-popup v-model="showPicker" round position="bottom">
      <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script>
import api from "@/api/center";
import {
  mapState,
} from "vuex";
export default {
  data() {
    return {
      showPicker: false,
      isActive: false, //是否能激活按钮
      columns: ['+1 (美国)', '+86 (中国)', '+88 (中国台湾)'],
    }
  },
  computed: {
    ...mapState({
      loginUserinfo: state => state.global.loginUserinfo,
      baseData: state => state.global.baseData
    }),
  },
  methods: {
    onConfirm(value, index) {
      this.showPicker = false
      this.$toast(`当前值：${value}, 当前索引：${index}`);
    },

    //获取验证码
    getCode() {
      let _this = this
      function beforeClose(action, done) {
        if (action === 'confirm') {
          _this.sendCode()
          setTimeout(done, 1000);
        } else {
          done();
        }
      }
      this.$dialog.confirm({
        title: '温馨提示',
        message: '请确认是否发送验证码？',
        confirmButtonText: '确认发送',
        beforeClose,
      });
    },
    //执行发送验证码
    sendCode() {
      console.log("send code")
    }
  },
  mounted() { },
}
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
* {
  box-sizing: border-box;
}

.main {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;

  .content {
    min-height: calc(100vh - 1.44rem);
    background-color: #F0F5FD;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 15px 15px;
    position: relative;

    .box {
      width: 100%;
      height: 199px;
      background: #ffffff;
      border-radius: 8px;
      padding: 15px;

      .row {
        .top {
          display: flex;
          align-items: center;

          p {
            font-size: 13px;
            font-weight: 500;
            color: #444444;
          }

          img {
            width: 17px;
            height: 17px;
            margin-right: 8px;
          }
        }

        .bottom {
          width: 315px;
          height: 46px;
          margin-top: 12px;
          background: #f0f5fd;
          border-radius: 5px;
          display: flex;
          align-items: center;
          padding: 7px 15px;

          .left {
            width: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            p {
              font-size: 14px;
              color: #222222;
            }

            .line {
              height: 15px;
              width: 1px;
              background-color: #9eacb3;
            }
          }

          .right {
            flex: 1;
            display: flex;
            align-items: center;
            padding-left: 10px;
            height: 100%;
            position: relative;

            .code {
              position: absolute;
              right: 0;
              font-size: 14px;
              color: #afb1b3;
              cursor: pointer;
            }

            input {
              border: none;
              background-color: transparent;
              font-size: 14px;
              color: #222222;
              width: 100%;

              &::placeholder {
                color: #afb1b3;
              }
            }
          }
        }
      }
    }

    .button {
      width: 345px;
      height: 44px;
      background: #c0c5ca;
      border-radius: 4px;
      margin-top: 20px;
      line-height: 44px;
      text-align: center;
      font-size: 14px;
      color: #ffffff;



      &.active {
        background: #479fff;

        &:active {
          background: #68aefa;
        }
      }
    }


    .safe {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;

      P {
        font-size: 14px;
        text-align: center;
        color: #afb1b3;
      }

      .img {
        width: 12px;
        height: 14px;
        margin-right: 5px;
      }

    }
  }

}
</style>